<script setup>
import {QuillEditor} from "@vueup/vue-quill";
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import {ref} from "vue";
import {post} from "@/net/index.js";
import {ElMessage} from "element-plus";

const props = defineProps({
  tid:String,
  quote:Object,
  show: Boolean
})
const content = ref('')
const emit = defineEmits(['close'] ['update'])
const textRef = ref()
function onDrawerOpen() {
  textRef.value.setContents('','user')
}
function submit() {
  post("api/forum/add-comment", {
    tid: props.tid,
    quote: props.quote?props.quote.id:-1,
    content: JSON.stringify(content.value)
  }, () => {
    ElMessage.success("发表评论成功")
    emit('close')
    textRef.value.setContents('','user')
    emit('update')
  })
}
function deltaToSimpleText(delta) {
  let str = '';
  for (let op of JSON.parse(delta).ops) {
    str += op.insert
  }
  if (str.length > 35) str = str.substring(0, 35) + "...";
  return str
}
</script>

<template>
<div>
  <el-drawer @open="onDrawerOpen"
             :title="quote?`发表对:${deltaToSimpleText(quote.content)}的回复`:'发表评论'"
             :model-value="props.show" @close="emit('close')"
             direction="btt" size="270" :close-on-click-modal="false">
    <div>
      <div>
        <quill-editor ref="textRef" style="height: 120px" v-model:content="content" placeholder="请发表友善评论...">

        </quill-editor>
      </div>
      <div style="text-align: right;margin : 20px 5px">
        <el-button  type="primary" plain @click="submit">发表评论</el-button>
      </div>
    </div>
  </el-drawer>

</div>
</template>

<style scoped>
:deep(.el-drawer) {width: 800px; margin: 20px auto; border-radius: 10px;}
:deep(.el-drawer__header) {margin: 0;}
:deep(.el-drawer__body) {padding: 0;}
:deep(.ql-toolbar) {
  border-radius: 5px 5px 0 0;
  border-color: var(--el-border-color)!important;
}

:deep(.ql-container) {
  border-radius: 0 0 5px 5px;
  border-color: var(--el-border-color)!important;
}
:deep(.ql-editor){
  border-radius: 0 0 5px 5px;
  font-size: 14px;
}
:deep(.ql-editor.ql-blank::before){
  border-radius: 0 0 5px 5px;
  color: var(--el-text-color-placeholder)!important;
  font-style: normal;
}
:deep(.el-drawer__header) {
  background-color: #f0f0f0; /* 示例背景颜色 */
  color: #333; /* 示例文字颜色 */
  font-size: 18px; /* 示例字体大小 */
}
</style>


